<template>
  <el-dialog title="状态" :visible.sync="dialogVisible" :before-close="handleClose" width="400px"  :show-close="!isEncryption">
    <div>
      <el-steps direction="vertical" :active="1">
        <el-step title="信息确认并提交" :description="nowdate"></el-step>
        <el-step title="请前往 签字APP 签名" description="" v-if="checkStatus"></el-step>
        <!-- 	    <el-step description="2021-09-28 15:00">
					<div slot="title">
						<el-button size="small" type="primary">签字完成</el-button>
					</div>
				</el-step> -->
        <el-step icon="el-icon-loading" :text-inside="true" description="文件正在加密...." v-if="isEncryption">
          <div slot="title"><el-progress :text-inside="true" :stroke-width="12" :percentage="percentage"></el-progress></div>
        </el-step>
        <!-- <el-step title="签字信息提交成功" description="2021-09-28 15:00"></el-step>
        <el-step title="文件创建成功"></el-step> -->
      </el-steps>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    checkItem: {
      type:Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      percentage:0,
      isEncryption:false,
      dialogVisible: false,
      checkStatus:true,
      nowdate: ''
    };
  },
  created() {
    this.nowdate = this.dateFormat(new Date());
  },
  methods: {
    init() {
      this.getCheckStatus();
      this.starInver();
      this.dialogVisible = true;
    },
    getCheckStatus(){
      if(this.checkItem.detailList){
        for(let i=0;i<this.checkItem.detailList.length;i++){
          let item=this.checkItem.detailList[i];
          if(item.check==2){
            this.checkStatus=false;
            break
          }
          if(item.isEncryption==1){
            this.isEncryption=true;
            break
          }
        }
      }
    },
    starInver(){
      this.interval=setInterval(()=>{
           this.percentage+=10;
           if(this.percentage>=100){
             clearInterval(this.interval);
             this.handleClose();
           }
      },300)
    },
    handleClose() {
      if(this.interval)  clearInterval(this.interval);
      this.$emit('close');
    }
  }
};
</script>

<style scoped="scoped">
.item {
  width: 154px;
}

.item .active {
  border: 2px solid #126bc9;
  position: relative;
  width: 154px;
  height: 218px;
}
.item .icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
